<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-拖拽事件</title>
    <style>
        .box {
            width: 400px;
            display: flex;
            justify-content: space-between;
        }
        .list, 
        .list2 {
            border: 1px solid black;
            list-style: none;
            padding-left: 0;
        }
        li {
            width: 100px;
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="list">
            <li draggable="true">我是拖拽目标1</li>
            <li draggable="true">我是拖拽目标2</li>
            <li draggable="true">我是拖拽目标3</li>
            <li draggable="true">我是拖拽目标4</li>
        </ul>
        <ul class="list2">
            <li draggable="true">我是放置目标对象1</li>
            <li draggable="true">我是放置目标对象2</li>
            <li draggable="true">我是放置目标对象3</li>
            <li draggable="true">我是放置目标对象4</li>
        </ul>
    </div>
    <script>
        let liArr = document.querySelector('.list').querySelectorAll('li')
        // li拖拽对象
        liArr.forEach(li => {
            li.addEventListener('dragstart', (event) => {
                // console.log('dragstart');
            })
            li.addEventListener('drag', (event) => {
                // console.log('drag');
            })
            li.addEventListener('dragend', (event) => {
                // console.log('dragend');
            })
        })
        // 拖拽目标绑定
        let droptarget = document.querySelector('.list2')
        droptarget.addEventListener('dragenter', (event) => {
            event.preventDefault()
            console.log('dragenter');
        })
        droptarget.addEventListener('dragover', (event) => {
            event.preventDefault();
            console.log('dragover');
        })
        droptarget.addEventListener('dragleave', (event) => {
            console.log('dragleave');
        })
        droptarget.addEventListener('drop', (event) => {
            console.log('drop');
        })
    </script>
</body>
</html>